<template>
    <div class="home_content">
        <div>
            <el-card class="card_home">
                <div class="card_content" :style="{'height': '300px', 'width': 'calc(100vw - 240px)'}">
                    <div class="card_title">工程信息</div>
                    <div v-for="(temp, index) in programList" class="program_list" @click="gotoUrl(temp)">
                        <img :src="fileUrl+temp.showStyle" alt="">
                        <div class="program_list_title">{{ temp.programName }}</div>
                    </div>
                </div>
            </el-card>
        </div>
        <div>
            <el-card class="card_home">
                <div class="card_content" :style="{'height': height, 'width': '800px'}" >
                    <div class="card_title">名词解释</div>
                    <div v-for="(temp, index) in nounExplainList" class="noun_explain">
                        <div class="noun_explain_title">{{ temp.nounName }}</div>
                        <div class="noun_explain_content">{{ temp.nounExplain }}</div>
                    </div>

                </div>
            </el-card>
            <el-card class="card_home">
                <div class="card_content" :style="{'height': height, 'width': 'calc(100vw - 1085px)'}">
                    <div class="card_title">消息信息</div>
                    <div class="news_manager">
                        <div class="news_manager_title">2131313123123123</div>
                        <div class="news_manager_time">2024-09-09</div>
                        <div class="news_manager_content">341dfvrtgvd12321414dfvdfhrertewrtwetrewtwretwet</div>
                        <div class="news_manager_type">214er</div>
                        <el-button type="primary" @click="">处理</el-button>
                    </div>

<!--                    <div v-for="(temp, index) in noticeList" class="card_content_item">-->
<!--                        <div class="card_content_item_title">{{ temp.noticeTitle }}</div>-->
<!--                        <div class="card_content_item_message">{{ temp.noticeContent }}</div>-->
<!--                        <div class="card_content_item_other">发布时间：{{ temp.releaseDate }}</div>-->
<!--                    </div>-->
                </div>
            </el-card>
        </div>
    </div>
</template>

<script>
import PageList from "@/components/grid/pageList.vue";

export default {
    name: "home",
    components: {PageList},
    data() {
        return {
            height: '500px',
            fileUrl: CONFIG.fileURL,

            programList: [],
            nounExplainList: [],

            showApprove: false,
            apployId: '',

        }
    },
    mounted() {
        this.$nextTick(() => {
            this.height = (document.body.offsetHeight - 470) + 'px';
        })
        this.getProgramList();
        // this.getNoticeList();
        // this.getNeedList();
        // this.getOperateList();
    },
    methods: {
        getProgramList() {
            this.$axios.post("/CHILD_SYSTEM/systemProgram/getAllList").then(res => {
                this.$root.setStorage('programList', res.data);
                this.programList = res.data;
            })
        },
        getNeedList() {
            this.$axios.post("/CHILD_SYSTEM/newsMessage/getPageList", {
                newsType: 2,
                newFlag: 1,
                pageNum: 1,
                pageSize: 10,
                field: 'create_time',
                order: 'desc',
            }).then(res => {
                this.needList = res.data.rows;
            })
        },
        getNoticeList() {
            this.$axios.post("/CHILD_SYSTEM/newsNotice/getAllList", {
                statusFlag: 2,
                field: 'create_time',
                order: 'desc',
            }).then(res => {
                this.noticeList = res.data;
            })
        },
        getOperateList() {
            this.$axios.post("/CHILD_SYSTEM/newsMessage/getPageList", {
                newsType: 1,
                newFlag: 1,
                pageNum: 1,
                pageSize: 10,
                field: 'create_time',
                order: 'desc',
            }).then(res => {
                this.operateList = res.data.rows;
            })
        },
        gotoUrl(temp){
            this.$store.state.programId = temp.id;
            const tab = {
                title: temp.programName,
                path: temp.redirectUri,
                data: temp
            };
            this.$store.state.tabList.push(tab)
            this.$root.setStorage("tabTop", tab);
            this.$router.push(temp.redirectUri);
        },
        showNamePage(power) {
            this.$router.push({name: power, params: {}});
        },
        showPathPage(power) {
            this.$router.push({name: power, params: {}});
        },
        detailData(row) {
            this.apployId = row.id;
            this.showApprove = true;
        },
    }
}
</script>

<style lang="scss" scoped>
.card_home {
    margin: 20px;
    float: left;

    .card_title {
        height: 40px;
        line-height: 40px;
        font-size: 18px;
        border-bottom: #eaeaea solid 1px;
        padding-left: 20px;

        .el-button {
            float: right;
            padding: 7px 10px;
            margin: 5px 10px;
        }
    }

    .card_content {
        overflow-y: auto;
        padding: 10px;

        .program_list {
            float: left;
            margin: 10px;
            cursor: pointer;

            img {
                width: 100px;
                height: 100px;
            }

            .program_list_title {
                width: 100px;
                text-align: center;
                height: 20px;
                line-height: 20px;
            }
        }

        .noun_explain {
            width: 240px;
            float: left;
            border: #cccccc 1px solid;
            margin: 10px;

            .noun_explain_title {
                font-size: 20px;
                padding: 10px;
            }

            .noun_explain_content {
                font-size: 16px;
                padding: 10px;
            }
        }

        .news_manager {

        }

    }
}
</style>